// console.log("index");
// 1.研究对象（需求）2.共性问题，抽象成类（复用性）3.抽象类的共性问题---》基类（父类）4.研究类之间逻辑关系；

import Game from './game/game.js';

// 对象： 鲁班、亚瑟、玩家、技能、游戏管理类；
let game = new Game();
// console.log(game);
document.querySelector(".sub").onclick = function () {
    let username = document.querySelector(".username").value;
    // console.log(username);
    game.login(username);
    console.log(game);
    // 隐藏login 显示选择；
    document.querySelector(".login").style.display = "none";
    document.querySelector(".game").style.display = "block";
    // 修改名称
    document.querySelector(".chioseusername").innerHTML = username;
    renderHeroes(game.player.heroes);
}

function renderHeroes(heroes) {
    console.log(heroes);
    document.querySelector(".heroView").innerHTML = "";
    heroes.forEach(hero => {
        let heroItem = document.createElement("div");
        heroItem.classList.add("heroItem");
        heroItem.innerHTML = `<img src="${hero.ico}" />
      <span>${hero.name}</span>`;
        document.querySelector(".heroView").appendChild(heroItem);



        heroItem.onclick = function () {
            document.querySelector(".heroShow").innerHTML = `<img src="${hero.ico}" />`
            //  渲染技能
            renderSkills(hero.skills);
            // 渲染皮肤
            renderSkins(hero.skins);
            // 切换中间大图
            document.querySelector(".skinShow img").src = hero.skins[0].img

        }
    })
}

function renderSkills(skills) {

    // 渲染技能
    document.querySelector(".skillsView").innerHTML = "";
    skills.forEach(skill => {
        let img = document.createElement("div");
        img.classList.add("skill-item");
        img.innerHTML = `
            <img src="${skill.ico}"/>
            <div>${skill.name}</div>
        `
        document.querySelector(".skillsView").appendChild(img);
    })

}

function renderSkins(skins) {

    // 渲染技能
    document.querySelector(".skinView").innerHTML = "";
    skins.forEach(skin => {
        let el = document.createElement("div");
        el.classList.add("skinItem");
        el.innerHTML = `
            <img src="${skin.ico}" />
            <span>${skin.name}</span>
          `
        document.querySelector(".skinView").appendChild(el);

        el.onclick = function () {
            document.querySelector(".skinShow img").src = skin.img
        }
    })
}

document.querySelector(".heroBtn").onclick = function () {
    document.querySelector(".heroContainer").style.display = 'block'
    document.querySelector(".skinContainer").style.display = 'none'
}
document.querySelector(".skinBtn").onclick = function () {
    document.querySelector(".heroContainer").style.display = 'none'
    document.querySelector(".skinContainer").style.display = 'block'
}